<template>
  <div class="big-body product-detail">
    <van-nav-bar
      fixed
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img class="img" :src="item" />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品介绍 -->
      <div class="item-info">
    <div class="item-info-container">
      <div class="item-info-master">
        <span class="label f12" style="background-color: rgb(120, 160, 209)"
          >直降</span
        >
        <span class="label f12" style="background-color: rgb(145, 188, 111)"
          >包邮</span
        >
        直降包邮 {{detailObj.masterName}}
      </div>
      <div class="item-info-slave color-gray">
        果园生态种植 皮薄香甜爽口 富含天然维C
      </div>
      <div class="item-info-price flex jc-sb ai-fe mt-10">
        <span>
          <span class="price mr-5" style="font-size: 15px">￥</span>
          <span class="f20 price mr-5">{{detailObj.minPrice | fMoney}}</span>
          <span
            class="f12 old-price mr-5 color-gray"
            style="text-decoration: line-through"
            >￥{{detailObj.maxPrice|fMoney}}</span
          >
        </span>
        <span class="f12 color-gray">3932人购买</span>
      </div>
    </div>
    <!-- 数目弹框 -->
    <div class="item-cell">
      <van-cell style="font-size: 13px">
        <span class="color-gray">规格： X</span>
        2
      </van-cell>
      <div class="baged f12 flex ai-c" style>
        <van-icon
          name="passed"
          icon-size="12px"
          color="red"
          style="margin-right: 5px"
        />
        <span class="color-gray">包邮</span>
      </div>
    </div>
  </div>

    <!--图文详情  -->
      <div>
    <div class="mt-10 f12 fcc color-gray" style="background-color:white;height:46px;">—— 商品详情 ——</div>
    <div class="images">
      <img v-for="(item,index) in descPics" :src="item" :key="'desc'+index"/>
    <div
        class="mt-10 f12 fcc color-gray"
        style="background-color:white;height:46px;"
      >—— 预定流程及须知 ——</div>
      <img src="https://file.sdyxmall.com/h5/v1/public/app/img/group5.b0b24d0.png" alt />
    </div>
    <div class="context">
      <p class="big-item">一、关于发货</p>
      <p class="small-item">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
      <p class="big-item">二、关于发货</p>
      <p class="small-item">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
      <p class="big-item">二、关于发货</p>
      <p class="small-item">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
      <p class="big-item">二、关于发货</p>
      <p class="small-item">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
    </div>
  </div>

    <!-- 底部购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" to="/chat" />
      <van-goods-action-icon icon="like-o" text="收藏" />
      <van-goods-action-icon icon="cart-o" text="购物车" :info="cartNum" to="/cart" />
      <div class="fg1"></div>
      <div class="flex">
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
        <van-goods-action-button type="danger" text="立即购买" />
      </div>
    </van-goods-action>
  </div>
</template>
<script>
import Swiper from "./detail/Swiper";
import Intro from "./detail/Intro";
import Pics from "./detail/Pics";
import $http from "@/utils/http";
export default {
  components: {
    Swiper,
    Intro,
    Pics,
  },

  data() {
    return {
      // 定义购物车数量
      cartNum: 0,
      productId: "",
      // 轮播图片列表
      imgList: [],
      // 定义详情对象
      detailObj: {},
      // 定义产品图片
      descPics:[]
    };
  },

  created() {
    // 获取首页传过来的productId, 并保存起来
    this.productId = this.$route.params.productId;
    this.getProductDetail();
  },

  methods: {
    // 加入购物车
    addCart() {
      let data = {productId: this.productId};
      $http.post('/cart/add',data).then(res=> {
       // 给购物车加1
        this.cartNum++;
      })
    },

    // 获取商品详情
    getProductDetail() {
      let productId = this.productId;
      $http
        .get("/product/detail", {
          params: { productId },
        })
        .then((res) => {
          console.log(res);
          // 给imgList数组重新赋值
          this.imgList = res.result.banners;
          // 给详情对象重新赋值
          this.detailObj = res.result;
          // 给产品图片数组重新赋值
          this.descPics = res.result.descPics;
          // 给购物车数量重新赋值
          this.cartNum = res.result.cartNum;
        });
    },
  },
};
</script>

<style lang="less">
@import "./detail.less";
.product-detail {
  .my-swipe {
    .img {
      width: 100%;
      height: 300px;
    }
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }

  .van-goods-action-button--first {
    width: 150px;
    border-bottom-left-radius: 0;
  }
  .van-goods-action-button--last {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
</style>

